<template>
  <div class='index-wrap'>
    <header><img src="../assets/img/logo.png" style="width:32px;height:32px;margin-right:10px;" />飞鼠体育</header>
    <nav>
      <ul>
        <template v-for='(item,index) in navList'>
          <router-link tag="li" :to="item.url" :class='current==index?"hover":""' @click.native='changeCurren(index)'>
            {{item.name}}</router-link>
        </template>
      </ul>
    </nav>
    <div class="content">
      <router-view></router-view>
    </div>
    <footer>
      <div class="foot">
        <h3>北京森友联合信息技术有限公司</h3>
        <p>地址：北京市朝阳区建国门外建华南路15号</p>
        <p>邮箱：1781882313@qq.com&nbsp;&nbsp;京ICP备14010601号-1</p>
      </div>
    </footer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        navList: [{
            'url': '/',
            'name': '首页'
          },
          {
            'url': '/outFootball',
            'name': '国际足球'
          },
          {
            'url': '/gnfoot',
            'name': '国内足球'
          },
          {
            'url': '/premier',
            'name': '英超'
          },
          {
            'url': '/cba',
            'name': 'CBA'
          },
          {
            'url': '/nba',
            'name': 'NBA'
          },
          {
            'url': '/comprehensive',
            'name': '综合体育专题'
          },
        ]
      };
    },
    methods: {
      checkCurren(val) {
        let cur;
        if(val ==  '/'){
          cur = 0;
        }else if (val == '/outFootball') {
          cur = 1
        } else if (val == '/gnfoot') {
          cur = 2
        } else if (val == '/premier') {
          cur = 3
        } else if (val == '/cba') {
          cur = 4
        } else if (val == '/nba') {
          cur = 5
        } else if (val == '/comprehensive') {
          cur = 6
        }else{
          cur = sessionStorage.getItem('index')||0
        }
        sessionStorage.setItem('index', cur)
        this.current = sessionStorage.getItem('index')
      },
      changeCurren(index){
        sessionStorage.setItem('index',index)
        this.current = sessionStorage.getItem('index')
      }
    },
    created() {
      this.checkCurren(this.$route.path);
    },
    mounted() {
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        this.$router.push('/H5Index')
      }
      
    }
  };

</script>

<style lang='scss' scoped>
  .index-wrap {
    width: 100%;

    header {
      width: 100%;
      height: 76px;
      text-align: center;
      line-height: 76px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }

    nav {
      width: 100%;
      height: 52px;
      background: rgba(202, 43, 30, 1);


      ul {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(255, 255, 255, .6);

        li {
          cursor: pointer;
        }

        li:hover {
          color: rgba(255, 255, 255, 1);
        }

        li.hover {
          color: rgba(255, 255, 255, 1);
        }
      }
    }

    .content {
      width: 1200px;
      margin: 0 auto;
      padding: 20px 0;
    }
  }

  footer {
    padding: 40px 0;
    background: #f9f9f9;
    color: #999;
    line-height: 2;
    border-top: 1px #ddd solid;

    .foot {
      width: 327px;
      margin: auto;
    }

    h3 {
      font-size: 15px;

    }
  }
</style>
<style lang="scss">
  .c-swiper {
    .swiper-pagination-bullet-active {
      background: #F4F4F4;
    }

    .swiper-pagination-bullets {
      left: 240px !important;
    }

    .swiper-button-next {
      background-image: url('../assets/img/right.png');
    }

    .swiper-button-prev {
      background-image: url('../assets/img/left.png');

    }
  }

</style>
